<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <div class="bg-white shadow-sm border-b">
      <div class="flex items-center justify-between p-2">
        <div class="flex items-center">
          <a 
            href="javascript:void(0)"
            @click="handleBack" 
            class="p-2 hover:bg-gray-100 rounded-full transition-colors"
          >
            <svg-icon name="back" class="w-5 h-5 text-gray-600" />
          </a>
        </div>
        
        <div class="relative max-w-2xl mx-auto w-full mr-2">
          <input
            v-model="searchInput"
            @keyup.enter="handleSearch"
            ref="searchInputRef"
            type="text"
            placeholder="search any applications"
            class="w-full border border-gray-300 rounded-full px-4 py-2 pl-4 pr-12 text-gray-700 placeholder-gray-400 focus:outline-none text-base"
          />
          <a
            href="javascript:void(0)"
            @click="handleSearch"
            class="absolute right-3 top-1/2 transform -translate-y-1/2 p-1 text-orange-500 hover:text-orange-600 transition-colors"
          >
            <svg-icon name="search" class="w-5 h-5" />
          </a>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="py-6 w-full md:w-[90%] mx-auto ">

      <!-- 热门搜索 -->
      <div class="mb-5 px-2">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Trending Searches</h2>
        <div class="flex flex-wrap gap-3">
          <button
            v-for="tag in trendingTags"
            :key="tag"
            @click="searchByTag(tag)"
            class="px-4 py-2 bg-white border border-gray-200 rounded-full text-gray-700 hover:bg-gray-50 hover:border-gray-800 transition-all duration-200 text-sm font-medium"
          >
            {{ tag }}
          </button>
        </div>
      </div>

      <!-- 推荐应用 -->
      <div>
        <h2 class="px-2 text-lg font-bold text-gray-800 mb-4">Recommended For You</h2>
        <BusinessAppList class="bg-white py-2" :appList="processedAppList" />
      </div>
    </div>
  </div>
</template>

<script setup>
import AppList from '@/assets/data/reconmmed.json'
import { replaceImageDomains } from '~/utils/configHelper'

definePageMeta({
  layout: false
})

const searchInput = ref('')
const searchInputRef = ref(null)
const trendingTags = ref(['chat', 'game', 'Face', 'tiktok'])
const { getHomeParams, buildQueryString } = useUrlParams()
const hostname = useHostname()

// 处理后的应用列表，应用图片域名替换
const processedAppList = computed(() => {
  return replaceImageDomains(AppList, hostname)
})

const getSearchUrl = computed(() => {
  const finalParams = {
    ...getHomeParams(),
    searchKey: searchInput.value || ''
  }
  return `/search?${buildQueryString(finalParams)}`
})

const handleSearch = () => {
  if (!searchInput.value.trim()) {
    searchInputRef.value.focus()
    return
  }
  window.location.href = getSearchUrl.value
}

const searchByTag = (tag) => {
  searchInput.value = tag
  handleSearch()
}

const handleBack = () => {
  if (window.history.length > 1) {
    window.history.back()
  } else {
    const params = getHomeParams()
    window.location.href = `/?${buildQueryString(params)}`
  }
}

// 页面加载时自动聚焦搜索框
onMounted(() => {
  nextTick(() => {
    if (searchInputRef.value) {
      searchInputRef.value.focus()
    }
  })
  logEvent('Search_Page_Show')
})
</script>

<style scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.hover-color {
  color: var(--primary-color-hover);
}
</style>